<template>
    <div class="LiSt" v-if="JSON.stringify(listData) != '[]'">
        <ul class="list">
            <li
                v-for="(item, index) in listData"
                :key="index"
                class="ui1"
                @click="$router.push('/Detial')"
                :class="
                    item.type2 == 0 ? 'ui1' : item.type2 == 1 ? 'ui2' : 'ui3'
                "
            >
                <dl v-if="item.type2 == 0">
                    <dd>
                        <img
                            :src="item.cover_image_url"
                            @error="errorImage(item.id)"
                            draggable="false"
                            alt=""
                        />
                    </dd>
                    <dt>
                        <h1 class="li_title">
                            <span v-if="item.user.nickname"
                                ><i>{{ item.user.nickname }}</i></span
                            >
                            <h6>
                                {{ item.title }}
                            </h6>
                        </h1>
                        <p>{{ item.article_desc }}</p>
                        <ol class="li_tag" v-if="item.article_key_words">
                            <i
                                v-for="(
                                    itemr, index
                                ) in item.article_key_words.split(' ')"
                                :key="index"
                                >{{ itemr }}</i
                            >
                        </ol>
                        <div class="li_time">
                            <h2>{{ item.user.identity_name }}</h2>
                            <h3>{{ item.publish_time_desc }}</h3>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_pinglun.png"
                                    alt=""
                                />
                                <span>{{ item.view_count }}</span>
                            </h4>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_chakan.png"
                                    alt=""
                                />
                                <span>{{ item.comment_count }}</span>
                            </h4>
                        </div>
                    </dt>
                </dl>

                <div v-if="item.type2 == 1">
                    <h1 class="li_title">
                        <span><i>原创</i></span>
                        <h6>
                            中山六院骆衍新、禹汇川团队助力直肠癌NCC南中山六院骆衍新、禹汇川团队助力直肠癌NCC南
                        </h6>
                    </h1>
                    <ol class="li_tag">
                        <i>健康</i>
                        <i>医疗</i>
                        <i>药品</i>
                    </ol>
                    <div class="li_time">
                        <h2>新华网</h2>
                        <h3>2022-03-25</h3>
                        <h4>
                            <img
                                src="../assets/img/i_icon_pinglun.png"
                                alt=""
                            />
                            <span>384</span>
                        </h4>
                        <h4>
                            <img src="../assets/img/i_icon_chakan.png" alt="" />
                            <span>384</span>
                        </h4>
                    </div>
                </div>
            </li>
            <li v-if="false" class="ui1" @click="$router.push('/Detial')">
                <dl>
                    <dd>
                        <img src="../assets/images/bbb.jpg" alt="" />
                    </dd>
                    <dt>
                        <h1 class="li_title">
                            <span><i>原创</i></span>
                            <h6>
                                中山六院骆衍新、禹汇川团队助力直肠癌NCC南中山六院骆衍新、禹汇川团队助力直肠癌NCC南
                            </h6>
                        </h1>
                        <p>
                            作为一家数字健康医疗平台，叮当健康成立于2014年，通过自营叮当智慧药房作为
                            一家数健康医疗平台，叮当健康成立于2014年，通作为一家数字健康医疗平台，叮当健康成立于2014年，通过自营叮当智慧药房作为
                            一家数健康医疗平台，叮当健康成立于2014年，通
                        </p>
                        <ol class="li_tag">
                            <i>健康</i>
                            <i>医疗</i>
                            <i>药品</i>
                        </ol>
                        <div class="li_time">
                            <h2>新华网</h2>
                            <h3>2022-03-25</h3>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_pinglun.png"
                                    alt=""
                                />
                                <span>384</span>
                            </h4>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_chakan.png"
                                    alt=""
                                />
                                <span>384</span>
                            </h4>
                        </div>
                    </dt>
                </dl>
            </li>
            <li v-if="false" class="ui1" @click="$router.push('/Detial')">
                <dl>
                    <dd>
                        <img src="../assets/images/bbb.jpg" alt="" />
                    </dd>
                    <dt>
                        <h1 class="li_title">
                            <span><i>原创</i></span>
                            <h6>
                                中山六院骆衍新、禹汇川团队助力直肠癌NCC南中山六院骆衍新、禹汇川团队助力直肠癌NCC南
                            </h6>
                        </h1>
                        <p>
                            作为一家数字健康医疗平台，叮当健康成立于2014年，通过自营叮当智慧药房作为
                            一家数健康医疗平台，叮当健康成立于2014年，通作为一家数字健康医疗平台，叮当健康成立于2014年，通过自营叮当智慧药房作为
                            一家数健康医疗平台，叮当健康成立于2014年，通
                        </p>
                        <ol class="li_tag">
                            <i>健康</i>
                            <i>医疗</i>
                            <i>药品</i>
                        </ol>
                        <div class="li_time">
                            <h2>新华网</h2>
                            <h3>2022-03-25</h3>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_pinglun.png"
                                    alt=""
                                />
                                <span>384</span>
                            </h4>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_chakan.png"
                                    alt=""
                                />
                                <span>384</span>
                            </h4>
                        </div>
                    </dt>
                </dl>
            </li>

            <li v-if="false" class="ui2" @click="$router.push('/Detial')">
                <h1 class="li_title">
                    <span><i>原创</i></span>
                    <h6>
                        中山六院骆衍新、禹汇川团队助力直肠癌NCC南中山六院骆衍新、禹汇川团队助力直肠癌NCC南
                    </h6>
                </h1>
                <ol class="li_tag">
                    <i>健康</i>
                    <i>医疗</i>
                    <i>药品</i>
                </ol>
                <div class="li_time">
                    <h2>新华网</h2>
                    <h3>2022-03-25</h3>
                    <h4>
                        <img src="../assets/img/i_icon_pinglun.png" alt="" />
                        <span>384</span>
                    </h4>
                    <h4>
                        <img src="../assets/img/i_icon_chakan.png" alt="" />
                        <span>384</span>
                    </h4>
                </div>
            </li>

            <li v-if="false" class="ui3" @click="$router.push('/Detial')">
                <h1 class="li_title">
                    <h6>
                        中山六院骆衍新、禹汇川团队助力直肠癌NCC南中山六院骆衍新、禹汇川团队助力直肠癌NCC南
                    </h6>
                </h1>
                <ol>
                    <div>
                        <img src="../assets/images/bbb.jpg" alt="" />
                    </div>
                    <div>
                        <img src="../assets/images/bbb.jpg" alt="" />
                    </div>
                    <div>
                        <img src="../assets/images/bbb.jpg" alt="" />
                    </div>
                </ol>
                <div class="li_time">
                    <h2>新华网</h2>
                    <h3>2022-03-25</h3>
                    <h4>
                        <img src="../assets/img/i_icon_pinglun.png" alt="" />
                        <span>384</span>
                    </h4>
                    <h4>
                        <img src="../assets/img/i_icon_chakan.png" alt="" />
                        <span>384</span>
                    </h4>
                </div>
            </li>

            <li v-if="false" class="ui4" @click="$router.push('/Detial')">
                <dl>
                    <dd>
                        <img src="../assets/images/zhuanti.png" alt="" />
                    </dd>
                    <dt>
                        <h1>
                            <div>
                                <span><i>推荐</i></span>
                                <b>【养生健康周刊】一周干货推荐</b>
                            </div>
                            <h2>
                                新更新<span>10</span>篇/<span>120</span>篇文章
                            </h2>
                        </h1>

                        <p>
                            作为一家数字健康医疗平台，叮当健康成立于2014年，通过自营叮当智慧药房作为
                            一家数健康医疗平台，叮当健康成立于2014年，通作为一家数字健康医疗平台，叮当健康成立于2014年，通过自营叮当智慧药房作为
                            一家数健康医疗平台，叮当健康成立于2014年，通
                        </p>

                        <ol class="li_tag">
                            <i>健康</i>
                            <i>医疗</i>
                            <i>药品</i>
                        </ol>

                        <div class="li_time">
                            <h5>
                                <img
                                    src="../assets/img/i_img_yljk_1.png"
                                    alt=""
                                />
                            </h5>
                            <h2>新华网</h2>
                            <h3>2022-03-25</h3>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_pinglun.png"
                                    alt=""
                                />
                                <span>384</span>
                            </h4>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_chakan.png"
                                    alt=""
                                />
                                <span>384</span>
                            </h4>
                        </div>
                    </dt>
                </dl>
            </li>

            <li v-if="false" class="ui4" @click="$router.push('/Detial')">
                <dl>
                    <dd>
                        <img src="../assets/images/zhuanti.png" alt="" />
                    </dd>
                    <dt>
                        <h1>
                            <div>
                                <span><i>推荐</i></span>
                                <b>【养生健康周刊】一周干货推荐</b>
                            </div>
                            <h2>
                                新更新<span>10</span>篇/<span>120</span>篇文章
                            </h2>
                        </h1>

                        <p>
                            作为一家数字健康医疗平台，叮当健康成立于2014年，通过自营叮当智慧药房作为
                            一家数健康医疗平台，叮当健康成立于2014年，通作为一家数字健康医疗平台，叮当健康成立于2014年，通过自营叮当智慧药房作为
                            一家数健康医疗平台，叮当健康成立于2014年，通
                        </p>

                        <ol class="li_tag">
                            <i>健康</i>
                            <i>医疗</i>
                            <i>药品</i>
                        </ol>

                        <div class="li_time">
                            <h5>
                                <img
                                    src="../assets/img/i_img_yljk_1.png"
                                    alt=""
                                />
                            </h5>
                            <h2>新华网</h2>
                            <h3>2022-03-25</h3>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_pinglun.png"
                                    alt=""
                                />
                                <span>384</span>
                            </h4>
                            <h4>
                                <img
                                    src="../assets/img/i_icon_chakan.png"
                                    alt=""
                                />
                                <span>384</span>
                            </h4>
                        </div>
                    </dt>
                </dl>
            </li>
        </ul>

        <div class="load"><span>正在加载</span></div>
    </div>
</template>

<script>
import { axiosGet } from '../server/axios';
export default {
    name: 'LiSt',
    props: {
        li_type: String,
        li_id: String,
    },
    data() {
        return {
            listData: [],
            page: 1,
            limit: 20,

            // 分页缓冲
            pageState: true,
        };
    },
    mounted() {
        this.getData(0);
        window.addEventListener('scroll', this.handleScroll, true); // 监听（绑定）滚轮滚动事件
    },
    methods: {
        errorImage(id) {
            this.listData.map((item) => {
                if (item.id == id) {
                    item.type2 = 1;
                }
            });
        },
        // 滚动事件
        handleScroll() {
            let clientHeight =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            let offsetTop =
                document.documentElement.scrollHeight ||
                document.body.scrollHeight;
            // 设备/屏幕高度
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop; // 滚动条偏移量
            // 滚动条到底部的条件
            if (clientHeight + scrollTop >= offsetTop - 10 && this.pageState) {
                this.pageState = false;
                console.log('11111111111');
                this.page++;
                this.getData(this.page);
            }
        },
        // 获取列表数据判断
        getData(page) {
            switch (this.li_type) {
                case 'channel':
                    this.getChannelList(page);
                    break;

                default:
                    break;
            }
        },
        setAvatarBase64(src, callback) {
            let _this = this;
            let image = new Image();
            // 处理缓存
            image.src = src + '?v=' + Math.random();
            // 支持跨域图片
            image.crossOrigin = '*';
            image.onload = function () {
                let base64 = _this.transBase64FromImage(image);
                callback && callback(base64);
            };
        },
        // 将网络图片转换成base64格式
        transBase64FromImage(image) {
            console.log(image);
            let canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0, image.width, image.height);
            // 可选其他值 image/jpeg
            return canvas.toDataURL('image/png');
        },
        // 频道相关
        getChannelList(page) {
            axiosGet(
                'api/articles',
                {
                    page: page,
                    limit: this.limit,
                    channel_id: this.li_id,
                },
                (res) => {
                    this.pageState = true;
                    console.log(res);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }

                    res.data.list.map((item) => {
                        item.type2 = 0;
                        this.listData.push(item);
                    });
                    // this.listData.map((item) => {
                    //     this.setAvatarBase64(item.cover_image_url, (base64) => {
                    //         console.log(base64);
                    //     });
                    // });

                    // this.bannerlist = res.data;
                    // this.initBanner(); cover_image_url
                }
            );
        },
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll, true); //  离开页面清除（移除）滚轮滚动事件
    },
};
</script>
<style scoped lang="scss">
.LiSt {
    overflow: hidden;
}

.list {
    li {
        margin: 0 20px;
        padding: 18px 0;
        border-bottom: 2px solid #f6f6f6;
        cursor: pointer;
    }
    .li_time {
        font-size: 12px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #a7a7a7;
        margin-top: 7px;
        padding: 0 2px;
        overflow: hidden;
        line-height: 25px;

        h5 {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin-right: 5px;
            float: left;

            img {
                width: 100%;
            }
        }

        h2,
        h3 {
            float: left;
            margin-right: 9px;
        }

        h4 {
            float: right;
            display: flex;
            align-items: center;
            margin-left: 9px;

            img {
                margin-right: 1px;
            }
        }
    }
    .li_tag {
        overflow: hidden;
        margin-top: 16px;
        i {
            height: 20px;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #a7a7a7;
            padding: 4px 9px;
            float: left;
            margin-right: 4px;
        }
    }
    .li_title {
        display: flex;
        align-items: center;
        height: 30px;

        span {
            background: #f4f4f5;
            border: 1px solid #cbcccf;
            border-radius: 4px;
            padding: 1.5px 8.5px;

            i {
                white-space: nowrap;
            }
        }
        h6 {
            width: 450px;
            font-size: 20px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 5px;
        }

        h6:hover {
            color: #e60012;
        }
    }

    .ui1 {
        dl {
            display: flex;
            justify-content: space-between;

            dd {
                width: 215px;
                max-height: 142px;
                overflow: hidden;

                img {
                    width: 100%;
                    transition: all 1s;
                }
                img:hover {
                    transform: scale(1.2);
                }
            }

            dt {
                width: 500px;

                p {
                    font-size: 13px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #787878;
                    line-height: 18px;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    margin-top: 6px;
                }
            }
        }
    }
    .ui2 {
        h1 {
            h6 {
                width: 690px;
                color: #262626;
            }
        }
    }
    .ui3 {
        h1 {
            h6 {
                width: 690px;
                color: #262626;
                margin-left: 0;
            }
        }
        ol {
            margin: 17px 0;
            overflow: hidden;
            div {
                width: 233px;
                max-height: 142px;
                float: left;
                margin-right: 10px;
                overflow: hidden;
                img {
                    width: 100%;
                    transition: all 1s;
                }
                img:hover {
                    transform: scale(1.2);
                }
            }
        }
    }
    .ui4 {
        dl {
            dd {
                width: 770px;
                overflow: hidden;
                max-height: 300px;

                img {
                    width: 100%;
                }
            }
            dt {
                padding: 10px;
                h1 {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    div {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        span {
                            width: 40px;
                            height: 20px;
                            background: linear-gradient(
                                -90deg,
                                #fd6403 0%,
                                #e60012 100%
                            );
                            border-radius: 4px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 12px;
                            font-family: Source Han Sans SC VF;
                            font-weight: 400;
                            color: #ffffff;
                        }

                        b {
                            font-size: 20px;
                            font-family: Source Han Sans SC VF;
                            font-weight: 400;
                            color: #262626;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            max-width: 500px;
                        }
                    }

                    h2 {
                        font-size: 13px;
                        font-family: Source Han Sans SC VF;
                        font-weight: 400;
                        color: #787878;
                    }
                }

                p {
                    font-size: 13px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #787878;
                    line-height: 18px;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
